<template>
  <div class="left">
    <!-- 导航 -->

    <div style="height: 100%">
      <!-- 路由展示动态获取 -->
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"
        @select="selectRoutr"
        :collapse="isCollapse"
        style="height: 100%"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <div class="left-top flex-four">
          <img class="text-one" src="@/assets/logo.png" alt="" />
          <!-- 当收缩时候不显示 -->
          <div class="text-one" v-if="!isCollapse">中职通后台管理模板</div>
        </div>
        <!-- div路由展示动态获取 -->
        <div v-for="(item, index) in listRouter" :key="index">
          <!-- 1没有children -->
          <el-menu-item :index="item.path" v-if="!item.children">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
          <el-submenu index="1" v-else>
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <!-- 循环2有children -->
            <el-menu-item-group>
              <!--  -->
              <el-menu-item v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex" :index="childrenItem.path">{{childrenItem.name}}</el-menu-item>
              <!-- <el-menu-item index="/froms">表单</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 后台给过来的数据
      listRouter: [
       
      ],
    };
  },
  computed: {
    isCollapse: function () {
      //获取到vuexstate中的数据
      return this.$store.state.expansion;
    },
    active: function () {
      // 获取路由记录中routerData数组中 show:true
      let arr = this.$store.state.routerData;
      let item = arr.find((item) => {
        return item.show == true;
      });
      return item.path;
    },
  },
  created(){
  //获取权限
 this.listRouter= JSON.parse(sessionStorage.getItem('routerList'))
  },
  mounted(){
    //
  },
  methods: {
    selectRoutr(key) {
      //
      this.$router.push(key);
    },
  },
};
</script>

<style scoped lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.left {
  .left-top {
    background: #545c64;
    height: 50px;
    padding: 0 20px;

    img {
      height: 32px;
      width: 32px;
    }
  }
}
</style>